<template>
  <div class="giftToUpdata">
    <!-- 礼物入库更新弹窗 -->
    <el-dialog
      title="入库更新"
      :visible.sync="dialogVisible"
      width="25%"
      :show-close="true"
      :before-close="closeDailog"
    >
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="giftCode" label="礼物名称">
            <SearchSelectPicker
              url="/call-center/api/v1/careGift/page"
              placeholder="请选择礼物名称"
              lable-name="giftName"
              value-name="giftCode"
              method="post"
              :value.sync="formData.giftCode"
              :lable.sync="formData.giftName"
              :current-id.sync="formData.id"
              @selectChange="selectChange"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="quantity" label="入库数量">
            <el-input v-model="formData.quantity" clearable />
          </el-form-item>
        </el-form>
      </FormContainer>
      <span slot="footer" class="dialog-footer">
        <Button @click="closeDailog">取消</Button>
        <Button type="primary" @click="confrim">确定</Button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { giftUpdate } from '@/api/careGift'
export default {
  name: 'GiftToUpdata',
  components: {
    FormContainer,
    Button,
    SearchSelectPicker
  },
  props: {
    importData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      loading: false,
      formData: {
        id: '',
        giftCode: '',
        giftName: '',
        quantity: ''
      },
      quantityTotal: 0,
      curData: {},
      formRules: {
        quantity: {
          required: true,
          message: '请输入更新数量',
          trigger: 'blur'
        },
        giftCode: {
          required: true,
          message: '请输入礼物名称',
          trigger: 'blur'
        }
      }
    }
  },
  methods: {
    // 打开弹窗
    openDailog() {
      if (this.importData.length !== 1) {
        this.$message.info('请选择一条要操作的数据！')
        return
      }
      let data = this.importData[0]
      this.$nextTick(() => {
        if (data) {
          data = JSON.parse(JSON.stringify(data))
          data.quantity = null
          this.formData = data
          this.selectChange(data)
        } else {
          this.quantityTotal = 0
          this.formData = {
            id: '',
            giftCode: '',
            giftName: '',
            quantity: ''
          }
        }
        this.dialogVisible = true
      })
    },
    closeDailog() {
      this.quantityTotal = 0
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    selectChange(obj) {
      this.quantityTotal = obj.quantity
    },
    // 入库更新
    confrim() {
      return this.$refs.form.validate().then(() => {
        const params = { ...this.formData }
        if (
          params.quantity < 0 &&
          Math.abs(params.quantity) > this.quantityTotal
        ) {
          this.$message({
            message: '请输入与正确的入库更新数量',
            type: 'warning'
          })
          return
        }
        return giftUpdate([params]).then(response => {
          if (response.success === 1) {
            this.$message({
              message: '入库更新成功',
              type: 'success'
            })
            this.closeDailog()
            this.$emit('confrim')
            this.$refs.form.resetFields()
          }
        })
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
